<script setup lang="ts">

import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Button} from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from "@/components/ui/dialog";
import {Input, PasswordInput} from "@/components/ui/input";
import {toTypedSchema} from "@vee-validate/zod";
import * as z from "zod";
import {useForm} from "vee-validate";
import {toast} from "vue-sonner";
import {h} from "vue";
import {Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {UserPlus2Icon} from "lucide-vue-next";


const formSchema = toTypedSchema(z.object({
  firstName: z.string().min(2).max(50),
  lastName: z.string().min(2).max(50),
  username: z.string().min(2).max(50),
  email: z.string().min(2).max(50),
  phoneNumber: z.string().min(2).max(50),
  role: z.string().min(2).max(50),
  password: z.string().min(0).max(200),
  confirmPassword: z.string().min(0).max(500),
}))

const {isFieldDirty, handleSubmit} = useForm({
  validationSchema: formSchema,
})

const onSubmit = handleSubmit((values) => {
  toast('Key has been created.', {
    title: 'You submitted the following values:',
    description: h('pre', {class: 'mt-2 w-[320px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(values, null, 2))),
  })
  // TODO: do something with the values
})

</script>

<template>
  <Dialog>
    <DialogTrigger as-child>
      <Button class='space-x-1'>
        <span>Add User</span>
        <Component :is="UserPlus2Icon"/>
      </Button>
    </DialogTrigger>
    <DialogContent class="sm:max-w-lg">
      <DialogHeader>
        <DialogTitle class="flex space-x-2">
          <Component :is="UserPlus2Icon"/>
          <span>Add New User</span>
        </DialogTitle>
        <DialogDescription>
          Create new user here. Click save when you're done.
        </DialogDescription>
      </DialogHeader>
      <div class='-mr-4 h-[26.25rem] w-full overflow-y-auto py-1 pr-4'>
        <form class="space-y-4" @submit="onSubmit" id="addNewUserForm">
          <FormField v-slot="{ componentField }" name="firstName" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>First Name</FormLabel>
              <FormControl>
                <Input type="text"
                       placeholder='John'
                       v-bind="componentField"
                       autocomplete="off"/>
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField v-slot="{ componentField }" name="lastName" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Last Name</FormLabel>
              <FormControl>
                <Input type="text"
                       placeholder='Doe'
                       v-bind="componentField"
                       autocomplete="off"/>
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField v-slot="{ componentField }" name="username" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Userame</FormLabel>
              <FormControl>
                <Input type="text"
                       placeholder='john_doe'
                       v-bind="componentField"
                       autocomplete="off"/>
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField v-slot="{ componentField }" name="email" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="text"
                       placeholder='john_doe@gamail.com'
                       v-bind="componentField"
                       autocomplete="off"/>
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField v-slot="{ componentField }" name="phoneNumber" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Phone Number</FormLabel>
              <FormControl>
                <Input type="text"
                       placeholder='+186 18888888888'
                       v-bind="componentField"
                       autocomplete="off"/>
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField v-slot="{ componentField }" name="role" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Role</FormLabel>
              <Select v-bind="componentField">
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Select a role"/>
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectGroup>
                    <SelectItem value="superadmin">
                      Superadmin
                    </SelectItem>
                    <SelectItem value="admin">
                      Admin
                    </SelectItem>
                    <SelectItem value="manager">
                      Manager
                    </SelectItem>
                    <SelectItem value="user">
                      User
                    </SelectItem>
                  </SelectGroup>
                </SelectContent>
              </Select>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField v-slot="{ componentField }" name="password" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Password</FormLabel>
              <FormControl>
                <PasswordInput
                    id="password"
                    v-bind="componentField"
                    placeholder='e.g., S3cur3P@ssw0rd'
                />
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
          <FormField
              v-slot="{ componentField }" name="confirmPassword" :validate-on-blur="!isFieldDirty">
            <FormItem v-auto-animate class="grid grid-cols-[150px_1fr] items-center items-center gap-x-2">
              <FormLabel>Confirm Password</FormLabel>
              <FormControl>
                <PasswordInput
                    id="confirmPassword"
                    v-bind="componentField"
                    placeholder='e.g., S3cur3P@ssw0rd'
                />
              </FormControl>
              <FormMessage/>
            </FormItem>
          </FormField>
        </form>
      </div>
      <DialogFooter>
        <DialogTrigger as-child>
          <Button variant="outline">
            <span>Cancel</span>
          </Button>
        </DialogTrigger>
        <Button type="submit" form="addNewUserForm">
          <span>Create</span>
        </Button>
      </DialogFooter>
    </DialogContent>
  </Dialog>
</template>

<style scoped>

</style>
